/* @media screen and (min-width:0\0) */

@charset'utf-8';
@import'../../open_scss/theme';
@import'../../open_scss/color';
@import'../../open_scss/model';
html, body {
    width: 100%;
    height: 100%;
    font-size: 14px;
}
href {
    cursor: pointer;
}
a {
    text-decoration: none;
}
button {
    border: 0;
    padding: 6px 20px;
    @include radius(2);
    @include shadow(0, 1px, 6px, #999);
    background-color: $themeColor;
    color: $fontColor;
    cursor: pointer;
    outline: none;
    @include comic(0.5);
    &:hover {
        background-color: $btnHover;
    }
}
* {
    margin: 0 auto;
    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif!important;
}
.icon-weibo {
    color: #E6162D
}
.icon-qq {
    color: #008AC5
}
#jSouperApp._pc {
    width: 100%;
    .themeimgblock {
        position: fixed;
        z-index: -1;
        background-color: rgba($white, 0.6);
        width: 100%;
        height: 100%;
    }
}
.mainindex {
    width: 100%;
}
.blocktop {
    height: 120px;
}
.blockwrap {
    position: fixed;
    width: 100%;
    height: 0%;
    z-index: 1500;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: rgba($black, 0.6);
    @include comic_1(0.1, 0);
    &.focus {
        height: 100%;
        .box {
            height: auto;
        }
    }
    .box {
        height: 0;
        overflow: hidden;
        width: 300px;
        background-color: $white;
        position: fixed;
        z-index: 1501;
        top: 30%;
        left: 40%;
        .boxtitle {
            width: 290px;
            padding: 0 5px;
            height: 25px;
            line-height: 25px;
            font-size: 16px;
            font-weight: bold;
            background-color: $themeColor;
            color: $fontColor;
        }
        .infobox {
            text-align: center;
            padding: 10px 5px;
            .btnbox {
                padding-top: 10px;
                .btn {
                    border: 0;
                    padding: 0 5px;
                    height: 20px;
                    line-height: 20px;
                    margin: 0 5px;
                }
            }
        }
    }
}
.top_bar {
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
    color: $fontColor;
    padding: 10px 0;
    background-color: $themeColor;
    .topbar {
        width: 100%;
        @include comic_1(0, 0);
        color: $fontColor;
        .bar {
            width: 1000px;
        }
        .bar-left {
            display: inline-block;
            width: 50%;
            vertical-align: middle;
            .storetitle {
                cursor: pointer;
                color: $fontColor;
                font-size: 25px;
            }
        }
        .bar-right {
            display: inline-block;
            width: 50%;
            vertical-align: middle;
            text-align: right;
            .btnbox {
                display: inline-block;
                background-color: $btnHover;
                @include shadow(0, 1px, 10px, #444);
            }
            .searchbox {
                display: inline-block;
                vertical-align: middle;
                border-radius: 12px;
                height: 24px;
                box-sizing: border-box;
                padding: 2px 8px;
                width: 86px;
                text-align: left;
                position: relative;
                margin-right: 20px;
                background-color: mix($themeColor, $black, .5);
                @include comic(.3);
                .keyset {
                    width: 45px;
                    border: 0;
                    background-color: transparent;
                    margin-right: 5px;
                    outline: none;
                    line-height: 1em;
                    height: 20px;
                    padding: 0;
                    overflow: hidden;
                }
                .icon-search {
                    position: absolute;
                    color: $white;
                    right: 5px;
                    top: 0;
                    &:before {
                        font-size: 13px;
                    }
                }
                &.focus {
                    width: 186px;
                    background-color: $white;
                    .icon-search {
                        color: $btnHover;
                    }
                    .keyset {
                        width: 145px;
                    }
                }
            }
        }
        .chat {
            width: 67px;
            top: 5px;
            position: relative;
        }
        .bar-button {
            color: $fontColor;
            cursor: pointer;
            font-size: 15px;
            text-decoration: none;
            padding: 0 10px;
            display: inline-block;
            vertical-align: middle;
            &:hover {
                text-decoration: underline;
            }
        }
    }
}
.nav_bar {
    width: 100%;
    background-color: $white;
    padding: 20px 0;
    position: fixed;
    top: 55px;
    left: 0;
    z-index: 1000;
    font-size: 18px;
    @include comic(0.1);
    &.focus {
        font-size: 15px;
        padding: 10px 0;
    }
    .top1 {
        width: 100%;
        .nav-bar {
            width: 1000px;
            margin: 0 auto;
            .nav-box {
                @include BgTransparentAll(1, 100);
                vertical-align: middle;
                width: 524px;
                overflow: hidden;
                display: inline-block;
                @include comic_1(0.2, 0);
                &.focus {
                    @include BgTransparentAll(0, 0);
                    width: 0;
                }
            }
            .nav-button {
                @include comic_1(0.5, 0);
                padding: 0 20px;
                border-left: 1px solid $black;
                color: $black;
                text-decoration: none;
                &.first {
                    border-left: 0;
                    padding-left: 0;
                }
                &:hover {
                    color: $btnHover;
                }
            }
        }
    }
}
.bus_qrcode {
    position: fixed;
    z-index: 1010;
    right: 0;
    bottom: 20%;
    font-size: 20px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    height: 26px;
    @include shadow(0, 1px, 4px, $gray);
    width: 26px;
    line-height: 22px;
    text-align: center;
}
.qrcodeimg {
    position: fixed;
    display: block;
    right: 26px;
    bottom: 20%;
    width: 150px;
    height: 150px;
    padding: 15px;
    background-color: $white;
    @include shadow(0, 1px, 8px, $gray);
    font-size: 20px;
    z-index: 10000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    canvas {
        width: 100%;
        height: 100%;
    }
}
.bottom {
    width: 100%;
    text-align: center;
    padding: 40px 0;
    line-height: 25px;
}
.commodity {
    display: inline-block;
    border: 1px solid $grayLighter;
    margin: 10px 15px;
    width: 210px;
    height: auto;
    padding: 10px 4px;
    font-size: 13px;
    background-color: $white;
    @include BgTransparent($white, 0.75, 75);
    @include shadow(0, 1px, 5px, $grayLighter);
    overflow: hidden;
    @include comic(0.3);
    &:hover {
        @include shadow(0px, 5px, 15px, $gray);
    }
    .commodityImg {
        width: 200px;
        height: 200px;
        position: relative;
        overflow: hidden;
        .eachChild {
            top: 0;
            @include comic(0.3);
            width: 100%;
            margin: 0 auto;
            height: 100%;
            position: absolute;
            white-space: nowrap;
            .commodity-img {
                height: 100%;
                display: inline-block;
                position: relative;
            }
        }
        .goods-cover {
            padding: 2%;
            position: absolute;
            top: 120%;
            overflow: hidden;
            @include comic(0.3);
            @include BgTransparent($white, 0, 0);
            width: 100%;
            min-height: 30%;
            .intro {
                height: 52%;
                width: 96%;
                margin-bottom: 5px;
                overflow: hidden;
                word-break: break-word;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
            }
            .tobuy {
                height: 38%;
                width: 96%;
            }
        }
        &:hover {
            .goods-cover {
                width: 100%;
                height: 50%;
                top: 48%;
                @include BgTransparent($white, 0.75, 75);
            }
        }
    }
    .dec {
        width: 200px;
    }
    .item {
        @include newLine();
        width: 96%;
        padding-left: 2%;
        height: auto;
        margin-top: 3px;
        .price, .count {
            width: 50%;
            display: inline-block;
        }
        .num {
            width: 50px;
        }
    }
}
/* alert taskView */

.notify-container {
    position: fixed;
    right: 0;
    top: 35px;
    z-index: 1060;
    .notify {
        background-color: #ffffff;
        display: block;
        position: relative;
        min-width: 220px;
        font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
        color: #1d1d1d;
        padding: 10px;
        margin: 2px 2px 2px 0;
        .caption {
            font-size: 18px;
            line-height: 20px;
            margin-bottom: 5px;
        }
        .content {
            font-size: 14px;
            line-height: 16px;
        }
    }
}
.notify-wrapper {
    position: relative;
    background-color: #1d1d1d;
    width: auto;
    height: auto;
    min-width: 250px;
    color: #ffffff
}
